<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../icon/aosen/css/font-awesome.min.css" />
    <style type="text/css">
        html,
        body {
            height: 100%;
            background: #f2f2f2;
        }
        .searchBoxOut{
            width: 100%;
            height: 3.6rem;

            position: fixed;
            left:0;
            top: 0;
            display:flex;
      			display:-webkit-flex;
      			flex-direction: column;
      			-webkit-justify-content: flex-end;
        		justify-content: flex-end;
        }
        .searchBoxIn{
            width: 100%;
            height: 2.3rem;
            background: white;
        }
        .goback{
            text-align: center;
            line-height: 2.3rem;
            height: 100%;
            font-size: 10vw;
            color: #666666;
        }
        .centerBox{
            height: 100%;
            display:flex;
      			display:-webkit-flex;
      			flex-direction: column;
      			-webkit-justify-content: center;
        		justify-content: center;
        }
        .dosearch{
            width: 100%;
            height: 1.6rem;
            background: #eeeeee;
            border-radius: 0.8rem;
            overflow: hidden;
        }
        .hotAndHistiry{
            background: white;
            width: 100%;
            margin-top: 2.7rem
        }
        .history,.hot{
            width: 100%;
            line-height: 2rem;
            padding-left:0.5rem;
        }
        .title{
            width: 100%;
            height: 2rem;
        }

        .content .child{
            /*width:3.6rem;*/
            height:1.8rem;
            background: #f2f3f6;
            margin: 0 0.8rem 0.8rem 0;
            float: left;
            text-align: center;
            line-height: 1.8rem;
            border-radius: 5px;
            max-width: 8rem;
            padding: 0 0.8rem;
        }
        .clearFloat{
            clear: both;
        }
        .games-icon{
            width: 2.4rem !important;
            height: 2.4rem !important;
            padding: 0 !important;
            border-radius: 7px;
            overflow: hidden;
            margin: 0.8rem 0.8rem 0.8rem 0;
        }
        .games-icon img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .searchMore{
            width: 100%;
            height: 2.4rem;
            padding:0 0.6rem;
            line-height: 2.4rem;
        }
        .nodata{
            width: 100%;
            height: 2.4rem;
            text-align: center;
            line-height: 2.4rem;
            border-bottom: 1px solid #dddddd
        }
    </style>
</head>

<body>
    <header>
        <div class="aui-row searchBoxOut">
            <div class="aui-row searchBoxIn">
                <div class="aui-col-xs-1 goback" onclick="closeWin()">
                    <i class="fa fa-angle-left"></i>
                </div>
                <div class="aui-col-xs-9 centerBox">
                    <div class="dosearch aui-row">
                        <div class="aui-col-xs-11" style="height:100%;line-height:1.6rem;padding-left:0.8rem">
                            <input type="text" style="width:95%;height:1.6rem" placeholder="请输入游戏名称" oninput="getInput(this)">
                        </div>
                        <div class="aui-col-xs-1" style="height:100%;line-height:1.6rem" onclick="doSearch(1)">
                            <i class="aui-iconfont aui-icon-search"></i>
                        </div>
                    </div>
                </div>
                <div class="aui-col-xs-2" style="height:100%;text-align:center;line-height:2.3rem" onclick="doSearch(1)">搜索</div>
            </div>
        </div>

    </header>
    <div class="hotAndHistiry">
        <div class="history aui-hide">
            <div class="title">
                <span class="aui-pull-left" style="color:gray">历史搜索</span>
                <i class="aui-iconfont aui-icon-trash aui-pull-right" style="color:gray;padding:0.01rem 0.5rem;" onclick="clearSerHistory()"></i>
            </div>
            <div class="content" style="" id="historySearch">


            </div>
        </div>
        <div class="hot aui-hide" id="hotSearchBox">
            <div class="title">
                <span class="aui-pull-left" style="color:gray">热门搜索</span>
            </div>
            <div class="content" style="" id="hotSearch">

                <!--<div class="child aui-ellipsis-1">jjjjj</div>
                <div class="child aui-ellipsis-1">dddd</div>
                <div class="child aui-ellipsis-1">ddddddddddddddddppppppppppppppppppppdddd</div>
                <div class="child aui-ellipsis-1">eeeeeeeee</div>
                <div class="child aui-ellipsis-1">wwwwwww</div>
                <div class="child aui-ellipsis-1">q</div>
                <div class="clearFloat"></div>-->
            </div>
        </div>
        <div class="aui-card-list-content aui-hide searchResult" id="searchResult">
            <ul class="aui-list aui-media-list" id="searchResultList">
                <!-- <li class="aui-list-item aui-list-item-middle">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media games-icon">
                            <img src="../image/box.png">
                        </div>
                        <div class="aui-list-item-inner aui-list-item-arrow">
                            游戏名称
                        </div>
                    </div>
                </li> -->


            </ul>
            <div class="nodata aui-hide" id="noSearchRelt">抱歉！没有搜索到相关内容~</div>
            <div class="searchMore" onclick="doSearch(2)">
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/request.js"></script>
<script type="text/javascript">
    var searchHistory = [];
    var historySearch;
    apiready = function() {
    	getHotSearch();
        historySearch = $api.getStorage('searchHistory');
        if(historySearch != undefined && historySearch.length>0){
            $api.removeCls($api.dom('.history'), 'aui-hide');
            var html = '';
            for(var i=0;i<historySearch.length;i++){
                html+='<div class="child aui-ellipsis-1" onclick="doSearch(3,this)">'+historySearch[i]+'</div>';
            }
            html+='<div class="clearFloat"></div>';
            $api.html($api.byId('historySearch'), html);

        }else {
            $api.addCls($api.dom('.history'), 'aui-hide');

        }
        var header = $api.dom('header');
        // var footer = $api.dom('footer');
        var headerH = $api.fixStatusBar(header);
    };
    function getInput(tag){
        if($api.trimAll($api.val(tag))){
          $api.addCls($api.dom('.history'), 'aui-hide');
          $api.addCls($api.dom('.hot'), 'aui-hide');
          $api.removeCls($api.byId('searchResult'), 'aui-hide');
          $api.html($api.dom('.searchMore'), '更多与"<span style="font-size:4vw;font-weight:bold">'+$api.trimAll($api.val(tag))+'</span>"相关的游戏<i class="aui-iconfont aui-icon-right aui-pull-right" style="color:#ccc"></i>');
		  getSearchResult($api.trimAll($api.val(tag)));
          //去后台请求获取数据
        }else{
            $api.removeCls($api.dom('.hot'), 'aui-hide');
            if(historySearch != undefined && historySearch.length>0){
                $api.removeCls($api.dom('.history'), 'aui-hide');
            }
            $api.addCls($api.byId('searchResult'), 'aui-hide');

        }

    }
    function doSearch(index,tag){
        if(index == 3){
            var searchKey = $api.text(tag);
            api.openWin({
                name: 'searchResultPage',
                url: './searchResultPage.html',
                pageParam: {
                    searchKey: searchKey
                }
            });
        }else{
            if($api.trimAll($api.val($api.dom('input')))){
                searchHistory.push($api.trimAll($api.val($api.dom('input'))));
                $api.setStorage('searchHistory', searchHistory);
                api.openWin({
                    name: 'searchResultPage',
                    url: './searchResultPage.html',
                    pageParam: {
                        searchKey: $api.trimAll($api.val($api.dom('input')))
                    }
                });

            }else{
               api.toast({
                   msg: '请输入游戏名称',
                   duration: 2000,
                   location: 'bottom'
               });

            }
        }
    }
    function clearSerHistory(){
        $api.rmStorage('searchHistory');
        $api.addCls($api.dom('.history'), 'aui-hide');
    }
    function closeWin(){
        api.closeWin();

    }
    function getHotSearch(){
    	var data = {};
    	requestData('Index/hotSearch',data,'YES','NO','NO',_callbackList);
    }
    function _callbackList(ret){
    	if(ret.status == 200){
    		if(ret.list.length>0){
    			$api.removeCls($api.byId('hotSearchBox'), 'aui-hide');
    			var html='';
    			for(var i=0;i<ret.list.length;i++){
    				html+='<div class="child aui-ellipsis-1" onclick="goToProList(\''+ret.list[i].id+'\')">'+ret.list[i].game_name+'</div>';
    			}
    			html+='<div class="clearFloat"></div>';
    			$api.html($api.byId('hotSearch'), html);
    		}
    	}
    }
    function getSearchResult(target){
    	var data = {};
    	data['values'] = {};
    	data['values']['target'] = target;
    	
    	requestData('Index/doHotSearch',data,'YES','NO','NO',_callbackSearchList);
    }
    function _callbackSearchList(ret){
    	if(ret.status == 200){
    		if(ret.list.length>0){
    			var html = '';
          $api.addCls($api.byId('noSearchRelt'), 'aui-hide');
    			for(var i=0;i<ret.list.length;i++){
    				html+='<li class="aui-list-item aui-list-item-middle" onclick="\''+ret.list[i].id+'\'">';
    				html+='<div class="aui-media-list-item-inner">';
    				html+='<div class="aui-list-item-media games-icon">';
    				html+='<img src="'+pictureUrl+ret.list[i].game_icon+'">';
    				html+='</div>';
    				html+='<div class="aui-list-item-inner aui-list-item-arrow">'+ret.list[i].game_name+' </div>';
    				html+='</div></li>';
    			}
          $api.html($api.byId('searchResultList'), html);

    		}else{
          $api.removeCls($api.byId('noSearchRelt'), 'aui-hide');

        }
    	}
    }
    function goToProList(gameId){
      api.openWin({
					name: 'ProductListPage',
					url: './win.html',
					pageParam: {
							page:'ProductListPage',
							title: '商品列表',
              data:{
              	id:gameId,
              	userType:'seller'
              },
              bounces:true
					}
			});
    }
</script>

</html>
